<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<jsp:include page="../pageheader.jsp"/>

<div class="container">
    <div class="panel panel-info">
        <div class="panel-heading">
            Description
        </div>
        <div class="panel-body">
            ${trip.getDescription()}

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Departure</th>
                        <th>Arrival</th>
                        <th>Departure Date</th>
                        <th>Arrival Date</th>
                        <th>Vehicle</th>
                    </tr>
                </thead>
                <tbody>
                    <c:if test="${trip != null}">
                        <tr>
                            <td>${trip.getDeparture().getAddress()}</td>
                            <td>${trip.getDestination().getAddress()}</td>
                            <td>${trip.getDepartueEstimatedDate()}</td>
                            <td>${trip.getArrivalEstimatedDate()}</td>
                            <td>${trip.getVehicle().getBrand()}</td>
                        </tr>
                    </c:if>
                </tbody>
            </table>

            <c:if test="${!driver}">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        Evaluate the driver <i class="fa fa-arrow-right"></i> ${car.getUser().getName()}
                    </div>
                    <div class="panel-body">
                        <form id="driver" class="form-horizontal">
                            <div class="form-group">
                                <label for="driverCourtesyField" class="col-xs-12 col-sm-2">Courtesy</label>
                                <div class="col-xs-12 col-sm-10">
                                    <input type="number" class="form-control" min="1" max="10" data-error="Insert a value from 1 to 10!" minlength="1" maxlength="2" name="courtesy" id="driverCourtesyField" placeholder="Courtesy level from 1-10" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="driverPunctualityField" class="col-xs-12 col-sm-2">Punctuality</label>
                                <div class="col-xs-12 col-sm-10">
                                    <input type="number" class="form-control" min="1" max="10" data-error="Insert a value from 1 to 10!" minlength="1" maxlength="2" name="punctuality" id="driverPunctualityField" placeholder="Punctuality level from 1-10" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="driverDriveCarefullyField" class="col-xs-12 col-sm-2">Drive Carefully</label>
                                <div class="col-xs-12 col-sm-10">
                                    <input type="number" class="form-control" min="1" max="10" data-error="Insert a value from 1 to 10!" minlength="1" maxlength="2" name="drive" id="driverDriveCarefullyField" placeholder="Drive Carefully level from 1-10" />
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </c:if>
            <div id="passengersDiv">
                <c:forEach items="${trip.getParticipations()}" var="participation">
                    <c:if test="${participation.getUser().getId() != loggedUser.getId() && car.getUser().getId() != participation.getUser().getId() && participation.getAccepted()}">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                Evaluate the passenger <i class="fa fa-arrow-right"></i> ${participation.getUser().getName()}
                            </div>
                            <div class="panel-body">
                                <form id="${participation.getUser().getId()}" class="form-horizontal">
                                    <div class="form-group">
                                        <label for="goodHumoredField_${participation.getUser().getId()}" class="col-xs-12 col-sm-2">Good Humored</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input type="number" class="form-control" min="1" max="10" data-error="Insert a value from 1 to 10!" minlength="1" maxlength="2" name="goodHumored" id="goodHumoredField_${participation.getUser().getId()}" placeholder="Good Humored level from 1-10" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="punctualityField_${participation.getUser().getId()}" class="col-xs-12 col-sm-2">Punctuality</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input type="number" class="form-control" min="1" max="10" data-error="Insert a value from 1 to 10!" minlength="1" maxlength="2" name="punctuality" id="punctualityField_${participation.getUser().getId()}" placeholder="Punctuality level from 1-10" />
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </c:if>
                </c:forEach>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    Evaluate the car <i class="fa fa-arrow-right"></i> ${car.getBrand()}
                </div>
                <div class="panel-body">
                    <form id="car" class="form-horizontal">
                        <div class="form-group">
                            <label for="carCleanlinessField" class="col-xs-12 col-sm-2">Cleanliness</label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="number" class="form-control" min="1" max="10" data-error="Insert a value from 1 to 10!" minlength="1" maxlength="2" name="cleanliness" id="carCleanlinessField" placeholder="Cleanliness level from 1-10" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="carSafetyField" class="col-xs-12 col-sm-2">Safety</label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="number" class="form-control" min="1" max="10" data-error="Insert a value from 1 to 10!" minlength="1" maxlength="2" name="safety" id="carSafetyField" placeholder="Safety level from 1-10" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="carConservationField" class="col-xs-12 col-sm-2">Conservation</label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="number" class="form-control" min="1" max="10" data-error="Insert a value from 1 to 10!" minlength="1" maxlength="2" name="conservation" id="carConservationField" placeholder="Conservation level from 1-10" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="panel-footer">
            <button type="button" onclick="onClickSendEvaluation()" class="btn btn-primary">
                Evaluate
            </button>

        </div>
    </div>
</div>

<script>
    <c:if test="${!driver}">
        var driverId = ${car.getUser().getId()};
    </c:if>
        var carId = ${car.getId()};
        var tripId = ${trip.getId()};
</script>

<jsp:include page="../pagefooter.jsp"/>